<template>
<!-- 遮罩层 -->
<view v-if="status" @click="close">
    <!-- 弹出框 -->
    <main @click.stop>
        <!-- 嵌入内容 -->
        <slot></slot>
    </main>
</view>
</template>

<script lang="ts" setup>
import { ref, type Ref } from 'vue';
//设置组件初始状态为关闭
const status=ref<boolean>(false);
//定义打开函数
function open():void{
    status.value=true;
}
//定义关闭函数
function close():void{
    status.value=false;
}
//向外部暴露组件上的状态和方法
defineExpose<{
    status:Ref<boolean>,
    open:Function,
    close:Function
}>({status,open,close});
</script>

<style lang="scss" scoped>
%location{
    position:fixed;
    left:0;
    bottom:45px;
}
/* 遮罩层样式 */
view{
    z-index:99;
    @extend %location;
    height:100vh;
    width:100vw;
    background-color: transparentize(grey,0.5);
}
/* 弹出框样式 */
main{
    z-index: 999;
    @extend %location;
    width:90vw;
    max-height:50vh;
    padding:5vw;
    background-color: white;
}
</style>
